<template>
	<view class="bg-white px-1 py-2">
		<view class="flex j-around a-center p-3 bg-white">
			<view v-for="(item,index) in screen.list" :key="index" class="flex j-center a-center">
				<text class="" :class="screen.currentIndex===index?'text-blue text-bold':'gray'"
					@click="toggleclass(index)">{{item.name}}</text>
				<view class="flex flex-column j-center ml-1">
					<u-icon name="arrow-up-fill" :color="item.status===1?'#55aaff':'#888888'" size="9"></u-icon>
					<u-icon name="arrow-down-fill" :color="item.status===2?'#55aaff':'#888888'" size="9"></u-icon>

				</view>
			</view>
		</view>
		<view class="flex j-sb">
			<view class="input_view flex flex-wrap flex-1 j-sb">
				<view class="span-10 px-1 mb-2">
					<u--input type="text" v-model="query.model" placeholder="手机型号查询" fontSize="12px"
						@confirm="searchList" maxlength="50" confirmType="search" @clear="searchList"
						@blur="searchList"></u--input>
				</view>
				<view class="span-10 px-1 mb-2">
					<u--input type="text" v-model="query.imei" placeholder="手机IMEI查询" fontSize="12px"
						@confirm="searchList" maxlength="50" confirmType="search" @clear="searchList"
						@blur="searchList"></u--input>
				</view>
				<view class="span-10 px-1" @click="showTypeCode=true">
					<view class="flex j-sb a-center rounded-10" style="border: 1px solid #dadbde;padding: 8px 6px;">
						<view class="font" style="color: #333;" v-if="query.conditionTypeCode">
							{{dictKey(conditionTypeCodeColumns[0],query.conditionTypeCode,'value','label')}}
						</view>
						<view class="font" style="color: #c0c4cc;" v-if="!query.conditionTypeCode">机况类型</view>

						<u-icon name="arrow-down" color="#c0c4cc" size="14"></u-icon>
					</view>
				</view>
				<view class="span-10 px-1 mb-2">
					<u--input type="text" v-model="query.subrackDesc" placeholder="机况查询" fontSize="12px"
						@confirm="searchList" maxlength="50" confirmType="search" @clear="searchList"
						@blur="searchList"></u--input>
				</view>
				<view class="span-10 px-1 mb-2" v-if="isMore">
					<u--input type="text" v-model="query.brand" placeholder="手机品牌查询" fontSize="12px"
						@confirm="searchList" maxlength="50" confirmType="search" @clear="searchList"
						@blur="searchList"></u--input>
				</view>
				<view class="span-10 flex j-sb px-1 mb-2 a-center" v-if="isMore">
					<view>
						<u--input type="text" v-model="query.minStorageAge" placeholder="最小库龄" fontSize="12px"
							@confirm="searchList" maxlength="50" confirmType="search" @clear="searchList"
							@blur="searchList"></u--input>
					</view>
					<view class="mx-1 text-primary">-</view>
					<view>
						<u--input type="text" v-model="query.maxStorageAge" placeholder="最大库龄" fontSize="12px"
							@confirm="searchList" maxlength="50" confirmType="search" @clear="searchList"
							@blur="searchList"></u--input>
					</view>
				</view>
				<view class="span-10 px-1" v-if="isMore" @click="showPicker=true">
					<view class="flex j-sb a-center rounded-10" style="border: 1px solid #dadbde;padding: 8px 6px;">
						<view class="font" style="color: #333;" v-if="query.warehouseCode">
							{{dictKey(warehouseColumns[0],query.warehouseCode,'code','name')}}
						</view>
						<view class="font" style="color: #c0c4cc;" v-if="!query.warehouseCode">所在仓库</view>

						<u-icon name="arrow-down" color="#c0c4cc" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view @click="handleSacn">
				<u-icon name="scan" color="#00B0FF" size="26"></u-icon>
			</view>
		</view>
		<view class="flex a-center j-end px-2 mt-2 mb-2" v-if="!isMore" @click="moreSearch">
			<text class="font text-primary">更多查询条件</text>
			<u-icon name="arrow-down" color="#00B0FF" size="14"></u-icon>
		</view>
		<view class="flex a-center j-end px-2 mt-2 mb-2" v-if="isMore" @click="moreSearch">
			<text class="font text-primary">收起</text>
			<u-icon name="arrow-up" color="#00B0FF" size="14"></u-icon>
		</view>

		<view class="p-1" v-if="listsData.length!=0">
			<view class="py-1 px-2 border rounded-10 mb-2" v-for="(item,index) in listsData" :key="index"
				@click="navigateTo('pages/warehouse/product/detail?productCode='+item.productCode)">
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">所在仓库：</view>
					<view class="flex-1">{{item.warehouseName}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">商品编码：</view>
					<view class="flex-1">{{item.productCode}}</view>
					<image src="@/static/images/fuzhi.png" mode="widthFix" class="svgmini ml-3"
						@click.stop="utils.setClipboardData(item.productCode)"></image>
				</view>

				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">手机型号：</view>
					<view class="flex-1">{{item.model}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">手机品牌：</view>
					<view class="flex-1">{{item.brand}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">内存：</view>
					<view>{{item.memory?item.memory:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">颜色：</view>
					<view class="flex-1">{{item.colour?item.colour:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2" >
					<view class="text-right col-170">IMEI：</view>
					<view class="flex-1">{{item.imei?item.imei:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">机况：</view>
					<view class="flex-1">{{item.subrackDesc?item.subrackDesc:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">库龄：</view>
					<view class="flex-1">{{item.storageAge?item.storageAge:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">成本价：</view>
					<view>{{item.costPrice}}</view>
				</view>
				
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">机况类型：</view>
					<view class="flex-1">{{item.conditionTypeName?item.conditionTypeName:'--'}}</view>
				</view>

			</view>
		</view>

		<empty v-else />

		<u-picker :show="showPicker" :columns="warehouseColumns" keyName="name" @confirm="confirmPicker"
			@cancel="cancelSearch"></u-picker>

		<u-picker :show="showTypeCode" :columns="conditionTypeCodeColumns" keyName="label" @confirm="confirmTypeCode"
			@cancel="cancelSearch2"></u-picker>

	</view>
</template>

<script>
	import {
		itLibraryList,
		warehouseByUser,
		productPageAll,
		productPage
	} from '@/common/api/itLibrary.js'
	export default {
		name: "",
		data() {
			return {
				query: {
					model: '',
					brand: '',
					subrackDesc: '',
					minStorageAge: '',
					maxStorageAge: '',
					sign: 1,
					saleUserId: '',
					warehouseCode: '',
					productCode: '',
					qrCode: '',
					conditionTypeCode: '',
					imei: '',
					sortList: [{
						field: 'cost_price',
						order: ''
					}, {
						field: 'inbound_time',
						order: ''
					}]
				},
				screen: {
					currentIndex: 0,
					list: [{
							name: "价格",
							status: 0,
							key: 'cost_price'
						},
						{
							name: "库龄",
							status: 0,
							key: 'inbound_time'
						},
					],
				},
				listsData: [],
				type: '',
				isMore: false,
				showPicker: false,
				warehouseColumns: [
					[]
				],
				showTypeCode: false

			}
		},
		onLoad(option) {
			this.getWarehouseByUser();
			this.conditionTypeCode();
			this.query.saleUserId = this.app_user_info.id;
			if (option.type) {
				this.type = option.type;
				if (this.type == 'product') {
					this.query.sign = 1;
					uni.setNavigationBarTitle({
						title: '我的库存'
					});
				}
				if (this.type == 'itLibrary') {
					this.query.sign = 2;
					uni.setNavigationBarTitle({
						title: '它库库存'
					});
				}
				this.searchList();
			}
		},
		onPullDownRefresh() {
			this.searchList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				this.query.pageNo += 1;
				this.getLists();
			}
		},
		watch: {},
		computed: {},
		methods: {
			toggleclass(index) {
				let chooseindex = this.screen.currentIndex
				let choose = this.screen.list[chooseindex];
				if (index === this.screen.currentIndex) {
					choose.status = choose.status === 1 ? 2 : 1
					this.query.sortList[index].order = choose.status == 1 ? 'desc' : 'asc'
				} else {
					this.query.sortList[index].order = ''
					choose.status = 0
					this.screen.currentIndex = index
					this.screen.list[index].status = 1
				}
				this.query.sortList[index].field = this.screen.list[index].key;
				this.searchList();
			},

			handleSacn() {
				uni.scanCode({
					success: res => {
						this.query.model = '';
						this.query.brand = '';
						this.query.warehouseCode = '';
						this.query.productCode = '';
						this.query.subrackDesc = '';
						this.query.minStorageAge = '';
						this.query.maxStorageAge = '';
						if (res.errMsg == 'scanCode:ok') {
							this.query.qrCode = res.result;
							this.searchList();
						} else {
							uni.$u.toast('扫码失败，请从新扫码');
						}
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			getWarehouseByUser() {
				this.warehouseColumns = []
				warehouseByUser().then(res => {
					this.warehouseColumns.push(res.data);
				})
			},
			// searchList() {
			// 	this.isLoadMore = false;
			// 	this.listsData = [];
			// 	this.query.pageNo = 1;
			// 	this.getLists()
			// },
			getLists() {
				productPage(this.query).then(res => {
					if (res.data && res.data.list.length == 0) {
						this.query.qrCode = '';
						let oldLoad = {}
						this.isLoadMore = true;
						oldLoad = Object.assign({}, this.query);
						oldLoad.pageNo = this.query.pageNo;
						this.query = oldLoad
						this.$forceUpdate()
						return
					}

					this.isLoadMore = false;
					let oldList = this.listsData || []
					oldList.push(...res.data.list)
					this.listsData = oldList;

				})
			},
			moreSearch() {
				this.isMore = !this.isMore;
			},
			confirmPicker(val) {
				this.query.warehouseCode = val.value[0].code;
				this.showPicker = false;
				this.searchList();
			},
			confirmTypeCode(val) {
				this.query.conditionTypeCode = val.value[0].value;
				this.showTypeCode = false;
				this.searchList();
			},
			cancelSearch() {
				this.query.warehouseCode = '';
				this.showPicker = false;
				this.searchList();
			},
			cancelSearch2() {
				this.query.conditionTypeCode = ''
				this.showTypeCode = false;
				this.searchList();
			}
		}
	}
</script>

<style lang="scss">
	.input_view {
		.u-input {
			padding: 8rpx 10rpx !important;
		}
	}
</style>